<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/reset.css" />
  <link rel="stylesheet" href="./libs/layui/css/layui.css">
  <script src="./libs/jquery.min.js"></script>
  <script src="./libs/layui/layui.js"></script>
  <title>登录</title>
  <style>
    html,body{
      height: 100%;
      min-height: 500px;
      background: linear-gradient(138deg, #ECEFED 0%, #F4FFFE 49%, #DCE8E4 100%);
    }
    body{
      background-position: bottom;
      background-image: url('./imgs/loginBg.png');
      background-size: 100vw 57.3333vw;
      background-repeat: no-repeat;
    }
    .login-main {
      box-sizing: border-box;
      height: 100%;
      padding: 4vw;
      position: relative;
    }

    .longin-log {
      margin: 0 auto;
      margin-top: 12vw;
      width: 73.8667vw;
      font-weight: 500;
      font-size: 7.4667vw;
      color: #333333;
      margin-bottom: 7.4667vw;
    }

    .login-main .header img {
      width: 2.6667vw;
      height: 4.8vw;
    }

    .login-title {
      margin: 0 auto;
      margin-bottom: 5.3333vw;
      height: 16vw;
      width: 72vw;
      /* line-height: 10vw; */
      font-weight: 400;
      font-size: 4.8vw;
      color: #333333;
    }

    .login-form {
      position: relative;
      width: 72vw;
      margin: 0 auto;
      background: #FFFFFF;
      padding: 11.2vw 7.4667vw;
      z-index: 99;
    }

    #get-code-btn {
      display: inline-block;
      width: 50%;
      text-align: right;
      border: none;
      font-size: 4vw;
      font-weight: 400;
      color: #41ba79;
      background: none;
      padding: 0;
    }

    #get-code-btn:disabled {
      /* background-color: gray; */
      cursor: not-allowed;
    }

    .layui-form-label {
      display: block;
      width: 100%;
      height: 4.8vw;
      line-height: 4vw;
      font-size: 4vw;
      text-align: left;
      padding: 0;
    }

    .layui-form-item {
      border-bottom: .2667vw solid #E6E6E6;
      margin-bottom: 8vw;
    }

    .layui-form-label img {
      width: 4vw;
      height: 4vw;
      margin-right: 2.1333vw;
      margin-top: -.8vw;
    }

    .layui-input-block {
      margin-left: 0;
      position: relative;
    }

    .layui-input-block .layui-input {
      height: 11vw;
      padding: 0;
      border: none;
      background: none;
    }

    .loginBtn {
      margin: 0 auto;
      width: 72vw;
      height: 11.7333vw;
      line-height: 11.7333vw;
      background: #41ba79;
      border-radius: 1.3333vw;
      font-weight: 500;
      text-align: center;
      color: #ffffff;
    }
  </style>
</head>

<body>
  <div class="login-main">
    <p class="longin-log">职领未来教育系统</p>
    <div class="login-title">信息系统运维管理-2024年9月第一批考试</div>
    <div class="login-form">
      <form class="layui-form" action="">
        <div class="layui-form-item">
          <label class="layui-form-label"><img src="./imgs/账号@2x.png" alt=""><span>身份证号</span></label>
          <div class="layui-input-block">
            <input type="text" name="idCard" required lay-verify="required|identity" placeholder="请输入身份证号"
              autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label"><img src="./imgs/账号_1@2x.png" alt=""><span>手机号</span></label>
          <div class="layui-input-block">
            <input type="text" name="phone" required lay-verify="required|phone" placeholder="请输入手机号" autocomplete="off"
              class="layui-input demo-phone">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label"><img src="./imgs/密码@2x.png" alt=""><span>手机验证码</span></label>
          <div class="layui-input-block">
            <input type="text" name="code" required lay-verify="required" placeholder="请输入验证码" autocomplete="off"
              class="layui-input" style="display: inline-block;width: 48%;">
            <button class="layui-btn" id="get-code-btn">发送验证码</button>
          </div>
        </div>
        <button class="layui-btn loginBtn" lay-submit lay-filter="login">登录</button>
      </form>
    </div>
  </div>
  <div class="layui-form" action="" id="codeAlert" style="display: none;padding: 8vw 10.6667vw;">
    <div class="layui-form-item" style="margin-bottom: 2.6667vw;border: none;">
      <input type="text" name="captcha" lay-verify="required" lay-reqText="请输入图形验证码" autocomplete="off"
        placeholder="请输入图形验证码" class="layui-input" id="imgCode">
    </div>
    <div><img src="./imgs/captCode.png" id=" codeImg" style="cursor: pointer;width: 100%;height: 13.3333vw;"></div>
    <div style="text-align: center;margin-top: 4.2667vw;">
      <button type="button" class="layui-btn layui-btn-danger" id="postCode" style="background: #41ba79">确定发送</button>
    </div>
  </div>
</body>
<script>
  layui.use(['laytpl', 'form'], function () {
    var winHeight = $(window).height(); //获取当前页面高度  
     $("body").height(winHeight);
     $("html").height(winHeight);
    var laytpl = layui.laytpl,
      form = layui.form,
      codeLayer,  //验证码弹窗
      captchaId;  //验证码图片ID
    // 初始化验证码
    getCaptchaId();
    // 获取验证码图片ID
    function getCaptchaId() {
      // ajax({
      //   url: "/captcha/getCaptchaId",
      //   type: "post",
      //   success: function (res) {
      //     captchaId = res.data
      //   },
      // });
    }
    // 倒计时
    function countDown() {
      var btn = document.getElementById('get-code-btn');
      var count = 60; // 倒计时秒数
      btn.disabled = true; // 禁用按钮
      btn.innerText = count + ' 秒后重新发送';
      var timer = setInterval(function () {
        if (count === 0) {
          clearInterval(timer);
          btn.disabled = false;
          btn.innerText = '重新发送';
        } else {
          btn.innerText = count-- + ' 秒后重新发送';
        }
      }, 1000);
    }
    // 点击图形验证码刷新验证码
    $('#codeImg').click(function () {
      if (captchaId) {
        // 获取图片地址
        var imgUrl = 'xxxxxxx' + "?captchaId=" + captchaId + "&d=" + new Date().getTime();
        document.getElementById('codeImg').src = imgUrl;
      } else {
        getCaptchaId();
      }
    })
    // 获取验证码点击
    $('#get-code-btn').click(function () {
      var isValid = form.validate('.demo-phone');  // 注：v2.7.0 新增
      // 验证不通过
      if (!isValid) {
        return false;
      }
      $('#codeImg').trigger('click');
      codeLayer = layer.open({
        type: 1,
        title: "图形验证码",
        content: $("#codeAlert"),
        cancel: function () {
          $("#codeAlert").hide()
        }
      });
      return false;
    });
    // 确定发送
    $("#postCode").on("click", function () {
      if (!$("input[name='captcha']").val().length) {
        layer.msg('必填项不能为空', { icon: 5 });
        return;
      }
      var captcha = $("input[name='captcha']").val();
      //校验验证码
      $.ajax({
        url: "/account_info/modifyAnswerSendSmsCaptcha",
        type: "post",
        data: { captchaId, captcha },
        success: function (res) {
          $("#codeAlert").hide()
          layer.close(codeLayer);
          // 倒计时
          countDown();
        },
        //异常处理
        error: function (e) {
          countDown();
          //
        },
      });
    });
    // 监听提交事件
    form.on('submit(login)', function (data) {
      // 显示加载提示
      var index = layer.load(1, {
        shade: [0.3, '#000'], // 背景遮罩
        // content: '正在加载，请稍候...' // 自定义文本
      });

      /*       
      data.field 表单数据
      发送请求登录
      */

      // 模拟异步操作
      setTimeout(function () {
        // 关闭加载提示
        layer.close(index);
        // alert('加载完成');
      }, 3000);
      // layer.msg(JSON.stringify(data.field));
      return false;
    });
  });
</script>

</html>